<template>
  <div class="box">
    <h1>订单管理</h1>
    <div class="header">
      <div class="commod_search_container">
        <div>
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div>
          <el-input v-model="input" placeholder="订单号"></el-input>
        </div>
        <div>
          <el-button type="primary" @click="onSearch">搜索</el-button>
        </div>
      </div>
    </div>

    <div>
      <template>
        <el-table :data="container" border style="width: 100%">
          <el-table-column
            fixed
            prop="orderNo"
            label="订单号"
          ></el-table-column>
          <el-table-column prop="receiverName" label="收件人"></el-table-column>
          <el-table-column prop="statusDesc" label="订单状态"></el-table-column>
          <el-table-column prop="payment" label="订单总价"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row)"
                type="text"
                size="small"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页器开始 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="addDatas.pagenum"
          :page-sizes="[3, 5, 10, 100]"
          :page-size="addDatas.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
        <!-- 分页器结束 -->
      </template>
    </div>
  </div>
</template>

<script>
import { shanglist, shanglist2 } from "../../../http/http";

export default {
  data() {
    return {
      // 全部数据
      container: [],
      // 传递参数的数据值
      addDatas: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      options: [
        {
          value: "ID",
          label: "按商品id查找",
        },
      ],
      value: "",
      input: "",
    };
  },
  mounted() {
    this.getShangList();
  },
  methods: {
    async getShangList() {
      const { data: res } = await shanglist({
        pageNum: this.addDatas.pagenum,
        pageSize: this.addDatas.pagesize,
      });
      // console.log(res);
      this.container = res.data.list;
      this.total = res.data.total;
    },
    handleSizeChange(newValue) {
      this.addDatas.pagesize = newValue;
      this.getShangList();
    },
    handleCurrentChange(newValue) {
      this.addDatas.pagenum = newValue;
      this.getShangList();
    },
    onSearch() {
      if (this.value) {
        if (this.value === "ID") {
          this.type = "orderNo";
        }
        shanglist2({
          [this.type]: this.input,
          pageNum: this.currpage,
        }).then((res) => {
          console.log(res);
          this.container = res.data.data.list;
          this.total = res.data.data.total;
        });
      } else {
        this.$message({
          message: "请选择查询条件",
          type: "warning",
        });
      }
    },
    handleClick(val) {
      console.log(val);
      this.$router.push(`/chaorder?id=${val.orderNo}`);
    },
  },
};
</script>

<style scoped>
.box {
  width: 80%;
  margin-left: 20%;
}
.header button {
  width: 100px;
  height: 40px;
  color: white;
  background: rgba(51, 122, 183);
  border: none;
  border-radius: 7%;
}
.commod_search_container {
  margin: 10px 0;
  width: 70%;
  height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
}
</style>